<template>
	<z-nav-bar :title="data.data.dictLabel" transparentTitle="auto"></z-nav-bar>
	<view class="cp-top">
		<view class="cp-top-tit flex_fsc">
			<text>{{ $gc.evaluationType[data.type] }}</text>
			<text class="lab">{{ data.data.dictLabel }}</text>
		</view>
		<view class="cp-time">{{ data.createTime }}</view>
		<view class="cp-pf flex_fsc">
			<text>综合评分:{{ data.score }}</text>
			<uni-rate size="12" :value="data.score / 2" color="#E1E3E6" active-color="#FF7742" />
		</view>
		<view v-if="data.target" class="cp-pf flex_fsc">
			<text>目标距离:{{ data.target.children[data.target.value || 0].dictLabel }}</text>
		</view>
		<view class="cp-gz">{{ data.data.remark }}</view>
	</view>
	<!--成绩-->
	<view class="cp-score">
		<view class="cp-score-tit">平均成绩</view>
		<uni-table ref="table" border stripe emptyText="暂无更多数据">
			<uni-tr class="uni-color-main-bg">
				<uni-th align="center" width="260rpx">
					<view class="z-font-24 uni-white">评测项目</view>
				</uni-th>
				<uni-th align="center">
					<view class="uni-white">值</view>
				</uni-th>
				<uni-th align="center" width="130rpx">
					<view class="uni-white">评分</view>
				</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in data.list" :key="item.id">
				<uni-td align="center" class="z-font-24">{{ item.dictLabel }}</uni-td>
				<uni-td align="center">
					<view v-if="item.children[0].dictLabel !== '最后评星'">
						<view v-if="item.children[0].hasChildren" class="z-font-24">
							<text v-if="item.maxValue">{{item.children[0].children[item.maxValue].dictLabel}}</text>
							<text v-else>--</text>
						</view>
						<view v-else class="z-font-24 flex_cc">
							<view class="select-number">{{ item.average }}</view>
							<view>{{ item.children[0].dictExtS }}</view>
						</view>
					</view>
					<view v-else>--</view>
				</uni-td>
				<uni-td align="center">
					<view class="flex_cc">
						<view class="z-font-24">{{ item.markAverage }}</view>
						<uni-rate
							allow-half
							size="12"
							:value="item.markAverage / 2"
							:readonly="true"
							color="#E1E3E6"
							active-color="#FF7742"
						/>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<view class="cp-score-tit">详细成绩</view>
		<view class="cp-score-select flex_fsc">
			<text
				v-for="(num, index) in numberList"
				:key="num"
				:class="{ select: numberIndex === index }"
				@click="numberIndex = index"
			>
				第{{ num }}球
			</text>
		</view>
		<uni-table ref="table" border stripe emptyText="暂无更多数据">
			<uni-tr class="uni-color-main-bg">
				<uni-th align="center" width="260rpx">
					<view class="z-font-24 uni-white">评测项目</view>
				</uni-th>
				<uni-th align="center">
					<view class="uni-white">值</view>
				</uni-th>
				<uni-th align="center" width="130rpx">
					<view class="uni-white">评分</view>
				</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in data.list" :key="item.id">
				<uni-td align="center" class="z-font-24">{{ item.dictLabel }}</uni-td>
				<uni-td align="center">
					<view v-if="item.children[0].dictLabel !== '最后评星'">
						<view v-if="item.children[0].hasChildren" class="z-font-24">
							<text>
								{{
									typeof item[`value${numberIndex}`] === 'number'
										? item.children[0].children[item[`value${numberIndex}`]].dictLabel
										: ''
								}}
							</text>
						</view>
						<view v-else class="z-font-24 flex_cc">
							<view class="select-number">{{ item[`value${numberIndex}`] || 0 }}</view>
							<view>{{ item.children[0].dictExtS }}</view>
						</view>
					</view>
					<view v-else>--</view>
				</uni-td>
				<uni-td align="center">
					<uni-rate
						allow-half
						size="12"
						v-model="item[`markValue${numberIndex}`]"
						:readonly="true"
						color="#E1E3E6"
						active-color="#FF7742"
					/>
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
	<navigator open-type="navigateBack">
		<bottom-box :buts="buts"></bottom-box>
	</navigator>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();

const data = reactive(uni.getStorageSync('local-evaluation'));
console.log(data);
const buts = [
	{
		label: '重新评测',
		color: '#008965',
		type: 'empty'
	}
];

const numberList = ['一', '二', '三', '四', '五'],
	numberIndex = ref(0);
</script>

<style lang="scss">
@import 'evaluation-detail.scss';
</style>
